<template>
	<cl-page background-color="#fff">
		<view class="historyPopup-empty">
			<uv-empty :text="'暂无播放记录'" :textSize="16" icon="https://cdn.uviewui.com/uview/empty/data.png"
				v-if="pager.pagination.total==0"></uv-empty>
		</view>
		<uv-swipe-action>
			<uv-swipe-action-item :options="options" v-for="(item,index) in list" :key="index" :name="item.id"
				@click="swipeActionItemClick" >
				<view class="list" @click="playRecordList(item)">
					<view class="list-flex">
						<view class="list-label">
							象数:
						</view>
						<view class="list-contant list-primary">
							{{item.elephantNumber}}
						</view>
					</view>
					<view class="list-flex">
						<view class="list-label">
							配方名称:
						</view>
						<view class="list-contant">
							{{item.name?item.name:'- - '}}
						</view>
					</view>
					<view class="list-flex" style="margin-bottom:0">
						<view class="list-label">
							创建时间:
						</view>
						<view class="list-contant">
							{{item.createTime}}
						</view>
					</view>
				</view>
			</uv-swipe-action-item>
		</uv-swipe-action>
	</cl-page>
</template>

<script lang="ts" setup>
	import { onPullDownRefresh, onShow, onReady } from "@dcloudio/uni-app";
	import { audioManagerObj, setMusicValueArr, setRecord } from "/@/cool/utils";
	import { useCool, useStore, usePager } from "/@/cool";
	import { reactive, ref, computed } from "vue";
	import { useUi } from "/$/cool-ui";
	const { pager, Loading, Finished, Loadmore, list, onData, onRefresh } = usePager();
	const { router,service } = useCool();
	const ui = useUi();
	const options = ref([{
		text: '备注',
		name: "delete",
		style: {
			backgroundColor: '#E6A23C'
		}
	},{
		text: '删除',
		name: "delete",
		style: {
			backgroundColor: '#f56c6c'
		}
	}])
	// 播放播放列表里的数据
	function playRecordList(item : { id : string; recipeName : string; elephantNumber : string; }) {
		audioManagerObj.recordId = item.id
		audioManagerObj.recordTitle = item.recipeName
		setMusicValueArr(item.elephantNumber + '')
		// #ifndef MP-WEIXIN
		setRecord(item.elephantNumber + '')
		// #endif
		
	}
	const recordInfo = ref({
		list: [],
		total: 1,
	}) //播放记录
	function swipeActionItemClick(res : { index : number; name : any; }) {
		if (res.index == 1) {
			ui.showConfirm({
				title: "提示",
				message: "确定要清除该记录吗?",
				showCancelButton: true,
				confirmButtonText: "确定",
				callback(action) {
					if (action == "confirm") {
						service.broadcast.record.delete({ ids: [res.name] }).then(() => {
							let index = recordInfo.value.list.findIndex((item : { id : any; }) => item.id == res.name)
							recordInfo.value.list.splice(index, 1)
							ui.showToast({ message: "删除成功" });
						})
					} else {
					}
				}
			});
		}else if(res.index==0){
			let detail= recordInfo.value.list.find(item=>item.id==res.name)
			console.log(detail)
			router.push('/pages/index/edit?id='+res.name+'&elephantNumber='+detail.elephantNumber)
		}
	}
	function refresh(params ?: any) {
		// 获取值
		const { data, next } = onRefresh(params);
		data.order = "updateTime"
		data.sort = "desc"
		// 绑定对应的服务
		next(service.broadcast.record.page(data).then(res=>{
			recordInfo.value=res
			return res
		}));
	}
	defineExpose({
		refresh
	});
	// 首次刷新
	onReady(() => {
		refresh();
	});
</script>

<style lang="scss" scoped>
	.list {
		margin-bottom: 20rpx;
		padding: 20rpx;
		background: $cl-fff-bg;
		border-radius: $cl-button-radius;

		.list-flex {
			display: flex;
			align-items: flex-start;
			font-size: $cl-font-size-base;
			margin-bottom:10rpx;
			.list-label {
				color: $cl-color-title;
			}

			.list-contant {
				flex:1;
				margin-left: 4rpx;
				word-break:break-all;
				color: $cl-color-paragraph;
			}

			.list-primary {
				color: $cl-color-imagePlayer-primary
			}
		}
	}
</style>